<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    class="modal"
    :width="900"
    wrapClassName="overview-classes-info-modal"
    :footer="null"
    @cancel="onCancel"
  >
    <div class="modal-container">
      <div class="cursor-pointer left" v-show="index != 0" @click="handleBack">
        <Icon icon="material-symbols:arrow-back-ios-new" size="30" color="#CCCCCC" />
      </div>
      <div class="classInfo_container">
        <div class="wrapper">
          <div class="title">{{ content.title }}</div>
          <div class="carousel" v-if="content.imgList && content.imgList.length > 0">
            <Carousel
              arrows
              :dots="false"
              :slides-to-show="3"
              :slides-to-scroll="1"
              :infinite="false"
              :afterChange="onAfterChange"
            >
              <template #prevArrow>
                <div
                  class="custom-slick-arrow left"
                  :class="showLeftArrow ? '' : 'hidden'"
                  style="left: -53px"
                >
                </div>
              </template>
              <template #nextArrow>
                <div
                  class="custom-slick-arrow right"
                  :class="showRightArrow ? '' : 'hidden'"
                  style="right: -53px"
                >
                </div>
              </template>
              <div v-for="(item, r) in content.imgList" :key="r">
                <Image :width="234" :height="186" class="object-cover height-fill" :src="item">
                  <template #placeholder>
                    <Image
                      class="object-cover height-fill"
                      src=""
                    />
                  </template>
                </Image>
              </div>
            </Carousel>
          </div>
          <div class="info">{{ content.description }} </div>
        </div>
      </div>
      <div
        class="cursor-pointer right"
        v-show="index != groupClass.length - 1"
        @click="handleForward"
      >
        <Icon icon="material-symbols:arrow-forward-ios" size="30" color="#CCCCCC" />
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { Carousel, Image } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import Icon from '/@/components/Icon';

  const index = ref(0);

  const [register] = useModalInner((params) => {
    index.value = params.index;
  });

  const title = ref<string>('');
  const imgList = ref<string[]>([]);
  const description = ref<string>('');
  const props = defineProps<{
    groupClass: any;
  }>();

  const content = computed(() => {
    console.log(props.groupClass);
    return {
      title: props.groupClass[index.value].name,
      imgList: props.groupClass[index.value].images,
      description: props.groupClass[index.value].description,
    };
  });

  const showLeftArrow = computed(() => {
    return currentSlideNum.value > 0;
  });
  const showRightArrow = computed(() => {
    return currentSlideNum.value < imgList.value.length - 3;
  });

  const currentSlideNum = ref<number>(0);
  const onAfterChange = (value) => {
    currentSlideNum.value = value;
  };

  const handleBack = () => {
    index.value = index.value - 1;
  };
  const handleForward = () => {
    index.value = index.value + 1;
  };

  const onCancel = () => {
    title.value = '';
    imgList.value = [];
    description.value = '';
  };
</script>
<style lang="less">
  .overview-classes-info-modal {
    color: red;

    .ant-modal-header {
      display: none;
    }

    .modal-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 200px;
    }

    .classInfo_container {
      position: relative;
      padding: 26px 66px 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .title {
        font-weight: 500;
        font-size: 20px;
        line-height: 23px;
        color: #333333;
        margin-bottom: 5px;
      }

      .carousel {
        .height-fill {
          height: 100%;
        }

        .ant-carousel {
          .slick-slider {
            height: 186px;
            line-height: 186px;

            .custom-slick-arrow {
              height: 40px;
              width: 22px;
              color: #ccc;
              z-index: 9;
              transition: all 0.3s;
              background-repeat: no-repeat;
              background-size: cover;

              &.left {
                background-image: url('/@/assets/images/models/left.svg');

                &:hover {
                  background-image: url('/@/assets/images/models/leftActive.svg');
                }
              }

              &.right {
                background-image: url('/@/assets/images/models/right.svg');

                &:hover {
                  background-image: url('/@/assets/images/models/rightActive.svg');
                }
              }

              &.hidden {
                display: none !important;
              }

              &:before {
                display: none;
              }

              &:hover {
                color: @primary-color;
              }
            }

            .slick-list {
              .slick-track {
                display: flex;
                flex-wrap: nowrap;

                .slick-slide {
                  width: 234px !important;
                  height: 186px !important;
                  overflow: hidden;

                  &:not(:last-child) {
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
      }

      .info {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #333333;
      }
    }
  }
</style>
